<template>
  <div class="goodsInfo-cantainer" @click="closeList">
    <div class="info-box">
      <!-- head return-->
      <div class="goodsInfo-head">
        <van-nav-bar title="详情">
          <template #left>
            <van-icon name="arrow-left" size="24" color="black" @click="backMenu" />
          </template>
        </van-nav-bar>
      </div>

      <!-- images -->
      <div class="goods-img">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item><img class="images" :src="nowGoodsItem.image_cdn === '' || nowGoodsItem.image_cdn === null ? localIMG : nowGoodsItem.image_cdn" alt="" /> </van-swipe-item>
        </van-swipe>
      </div>

      <!-- goods info -->
      <div class="goods-details">
        <div class="goods-join">
          <van-card num="1" :price="nowGoodsItem.price + '.00'" :desc="'库存: ' + nowGoodsItem.stock" :title="nowGoodsItem.name">
            <template #tags>
              <van-tag plain type="danger">火爆</van-tag>
              <van-tag plain type="primary">🔥</van-tag>
            </template>
            <template #footer>
              <div class="countBtn">
                <van-button class="subBTN" size="mini" @click="subNowGoods(nowGoodsItem.id)" v-if="nowGoodsItem.amount > 0">━ </van-button>
                <span class="amount" v-if="nowGoodsItem.amount > 0">{{ nowGoodsItem.amount }}</span>
                <van-button class="addBTN" size="mini" @click="addNowGoods(nowGoodsItem, nowGoodsItem.id)" :style="{ opacity: nowGoodsItem.stock <= 0 ? '0.36' : '' }">╋ </van-button>
              </div>
            </template>
          </van-card>
        </div>
        <div class="goods-info">
          <span class="shop-text">
            <h3 class="goodsText">部分食材采用: {{ nowGoodsItem.name }}等, 还库存 {{ nowGoodsItem.stock }} 份</h3>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '@/eventBus.js'

export default {
  props: ['nowGoodsItem', 'nowOrderList'],
  data() {
    return {
      // 关闭详情页开关
      detailsPageStatus: false,
      // 收起清单列表开关
      closeListStatus: false,
      localIMG: './../static/img/mxbc/Ice_Cream/Ferris_Crispy.jpeg'
    }
  },
  watch: {
    // 监听购物车商品数量变化, 与页面数据实时同步
    nowOrderList: {
      handler() {
        this.nowOrderList.find((o, i) => {
          if (o.id === this.nowGoodsItem.id) {
            this.nowGoodsItem.amount = o.amount
          }
        })
      },
      deep: true
    }
  },
  methods: {
    // 子传父 =>GoodsPage 关闭状态, v-if 判定是否关闭
    backMenu() {
      this.$emit('goodsDetails', this.detailsPageStatus)
      bus.$emit('tabbarStatus', true)
    },
    // 商品详情页添加购物车逻辑， 通过 子传父 将需要加入购物车的商品数据传给父组件 =>GoodsPage
    addNowGoods(item, mid) {
      if (item.stock < 0) {
        this.$notify({ type: 'warning', message: '商品库存不足', duration: 1500 })
      } else {
        this.$emit('addGoodsAmount', [item, mid])
      }
    },
    // 同上
    subNowGoods(mid) {
      this.$emit('subGoodsAmount', mid)
    },
    // 兄传兄 =>ShoppingCart 控制清单列表隐藏
    closeList() {
      bus.$emit('closeList', this.closeListStatus)
    }
  }
}
</script>

<style lang="less">
.info-box {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ededed;
  z-index: 1;
}
.van-nav-bar__content {
  background: #ededed;
}
.goods-img {
  position: absolute;
  width: 97%;
  height: 15em;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 9px;
  overflow: hidden;
  .my-swipe {
    width: 100%;
    height: 100%;
    .images {
      width: 100%;
      height: 100%;
    }
  }
}
.goods-details {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 97%;
  height: 18em;
  top: 18em;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 9px;
  margin-top: 0.3em;
  .goods-join {
    width: 100%;
    height: 11em;
    background: white;
    border-radius: 9px;
    .van-card {
      height: 100%;
      border-radius: 9px;
      background: white;
      .van-card__title {
        position: absolute;
        top: 0.6em;
        height: 1.8em;
        font-size: 1.8em;
        line-height: 1.8em;
      }
      .van-card__desc {
        position: absolute;
        top: 3.3em;
        height: 1.2em;
        font-size: 1.2em;
        line-height: 1.2em;
      }
      .van-tag--danger {
        position: relative;
        top: 7em;
        margin-right: 3px;
      }
      .van-tag--primary {
        position: relative;
        top: 7em;
        margin-right: 3px;
        border: white;
      }
      .van-card__price {
        position: relative;
        top: 3em;
        color: red;
        font-size: 1.5em;
        .van-card__price-integer {
          font-size: 1.5em;
        }
        .van-card__price-currency {
          font-size: 1.5em;
        }
      }
      .van-card__footer {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 2.4em;
        .countBtn {
          display: flex;
          align-items: center;
          .amount {
            font-size: 1.4em;
            color: #696969;
          }
          .subBTN {
            width: 2.1em;
            height: 2.1em;
            border-radius: 50%;
            margin-right: 9px;
            color: black;
            border: 0.09em solid black;
          }
          .addBTN {
            width: 2.15em;
            height: 2.15em;
            border-radius: 50%;
            margin-left: 9px;
            color: white;
            background: orange;
            border: none;
          }
        }
      }
      .van-card__num {
        font-size: 1.5em;
      }
    }
  }
  .goods-info {
    position: relative;
    width: 100%;
    height: 6.5em;
    background: white;
    border-radius: 9px;
    .shop-text {
      position: absolute;
      width: 100%;
      height: 100%;
      transform: scale(93%, 80%);
      .goodsText {
        font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;
        font-size: 1em;
        color: #808080;
      }
    }
  }
}
</style>
